<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示页面</title>
    <style type="text/css">
        table{border:1px solid;width:600px;height:350px;}
        td{text-align: center;border:1px solid black}
        tr:nth-child(1){font-weight: bold;}
        .highLight{background-color:lightgray}
        #wrap{
            width:1000px;
            height:2000px;
            border:1px;
        }
        #header{border:1px;width:980px;height:100px;}
        #a{
            width:950px;
            height:60px;
            background:lightgreen;
            color:#ffffff;
            font-size:25px;
            line-height:60px;padding-left:20px;
        }
        #header li{
            list-style-type: none;
            float:left;
            font-size: 12px;
            padding-right:50px;
        }
        #header a:link{color:#808080;text-decoration: none}
        #header a:visited{color:#808080;text-decoration: none}
        #header a:hover{color:#ff2a2a;text-decoration:none}
    </style>
    <script type="text/javascript">
        function light(obj){
            obj.setAttribute('class','highLight');
        }
        function unlight(obj){
            obj.removeAttribute('class')
        }
    </script>
</head>
<body>
<div id="wrap">
    <div id="header">
        <div id="a">校园保卫部门</div>
        <ul>
            <li><a href="#">登记</a></li>
            <li><a href="#">同学信息</a></li>
        </ul>
    </div>
    <br>
    <table cellpadding="0" cellspacing="0">
        <tr class="head">
            <td>学号</td>
            <td>姓名</td>
            <td>进入时间</td>
            <td>离开时间</td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr onmouseover="light(this)" onmouseout="unlight(this)" >
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>
</body>
</html>